<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
      <el-form-item label="搜索企业" prop="fileName">
        <el-input
          v-model="queryParams.fileName"
          placeholder="请输入企业名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="名单数量" prop="orderType">
        <el-select
          v-model="queryParams.orderType"
          placeholder="部门状态"
          clearable
        >
          <el-option
            v-for="(item, index) in listSort"
            :key="index"
            :label="item.name"
            :value="item.type"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="上传时间" prop="updataTime">
        <el-date-picker
          v-model="queryParams.updataTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="timeChange"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="info"
          plain
          icon="el-icon-upload2"
          size="mini"
          @click="handleImport"
          v-hasPermi="['system:user:import']"
          >导入</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:user:export']"
          >下载模板</el-button
        >
      </el-col>

      <right-toolbar @queryTable="getTableList"></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :data="tableList" @row-click="tableClick">
      <el-table-column label="序号" type="index" align="center">
        <template slot-scope="scope">
          <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="fileName" label="名称" width="400" align="center">
        <template slot-scope="scope">
          <div class="file_name_box">
            <div>
              <img
                src="../../../../assets/images/file_icon.png"
                alt=""
                class="file_icon"
              />
            </div>
            <div class="file_name_text">
              <span>{{ scope.row.fileName }}</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="countCorp" label="数量" width="400" align="center">
        <template slot-scope="scope">
          <span style="color: #3282e4">{{ scope.row.countCorp }} </span
          ><span> &nbsp; &nbsp; &nbsp; &nbsp;家</span>
        </template>
      </el-table-column>

      <el-table-column label="创建时间" align="center" prop="createTime">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getTableList"
    />

    <!-- 导入弹窗 -->
    <el-dialog title="上传名单" :visible.sync="importPopIshow" width="400px">
      <div>
        <div>
          <!-- <el-form-item label="名单名称" prop="folderName" label-width="400">
            <el-input
              v-model="queryParams2.folderName"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item> -->
          <div class="form_box">
            <div class="form_name">名单名称</div>
            <div class="input_box">
              <el-input
                v-model="queryParams2.folderName"
                placeholder="请输入内容"
              ></el-input>
            </div>
          </div>
          <div class="form_box2">
            <div class="form_name">分配类型</div>
            <div class="radio_box">
              <div class="radio_div">
                <el-radio v-model="queryParams2.importType" label="0"
                  >按上传名单分配至客户经理</el-radio
                >
              </div>
              <div class="radio_div">
                <el-radio v-model="queryParams2.importType" label="1"
                  >系统自动分配至客户经理</el-radio
                >
              </div>
            </div>
          </div>
          <el-form-item label="分配类型" prop="importType">
            <el-radio-group v-model="queryParams2.importType">
              <div>
                <el-radio name="0" label="0">按上传名单分配至客户经理</el-radio>
              </div>
              <div>
                <el-radio name="2" label="1">系统自动分配至客户经理</el-radio>
              </div>
            </el-radio-group>
          </el-form-item>

          <el-upload
            ref="upload"
            :limit="1"
            accept=".xlsx, .xls"
            :headers="upload.headers"
            :action="upload.url + '?updateSupport=' + upload.updateSupport"
            :disabled="upload.isUploading"
            :on-progress="handleFileUploadProgress"
            :on-success="handleFileSuccess"
            :auto-upload="false"
            drag
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip" style="margin-top: 20px">
              <span>请按照模板文件格式上传文件</span>
              <el-link
                type="primary"
                :underline="false"
                style="font-size: 12px; vertical-align: baseline"
                @click="importTemplate"
                >下载模板</el-link
              >
            </div>
          </el-upload>

          <div
            class="dialog-footer"
            style="margin-top: 25px;text-align: center;"
          >
            <el-button type="primary" @click="submitFileForm">确 定</el-button>
            <el-button @click="uploadFalse">取 消</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
    <EnterpriseList ref="EnterpriseList"></EnterpriseList>
    <!-- 表格详情弹窗 -->
    <el-dialog title="企业列表" :visible.sync="detailsIshow" width="1200px">
      <el-table :data="tableList2">
        <el-table-column
          label="公司名称"
          align="center"
          key="d2CorpName"
          prop="d2CorpName"
          width="250"
        />
        <el-table-column
          label="评分"
          align="center"
          key="creditRate"
          prop="creditRate"
        />

        <el-table-column prop="label" label="标签" width="400" align="center">
          <template slot-scope="scope">
            <div class="label_box">
              <div class="label1">
                {{ scope.row.label[0] }}
              </div>
              <div class="label2">
                {{ scope.row.label[1] }}
              </div>
              <div class="label3">
                {{ scope.row.label[2] }}
              </div>
              <div class="label4">
                {{ scope.row.label[3] }}
              </div>
            </div>
            <!-- <span style="color:#3282E4">{{ scope.row.label }} </span><span>  &nbsp; &nbsp; &nbsp; &nbsp;家</span> -->
          </template>
        </el-table-column>
        <el-table-column prop="d2LegalPer" label="法定代表人" align="center">
          <template slot-scope="scope">
            <div style="color: #3282e4">
              {{ scope.row.d2LegalPer }}
            </div>
          </template>
        </el-table-column>

        <el-table-column
          label="注册资本"
          align="center"
          key="d2Regcap"
          prop="d2Regcap"
        />
        <el-table-column
          label="成立日期"
          align="center"
          key="d2Esdate"
          prop="d2Esdate"
        />
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { listRole } from "@/api/system/role";
import EnterpriseList from "@/components/EnterpriseList/index";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import request from "@/utils/request";
import {getToken} from "@/utils/auth";

export default {
  name: "Dept",
  dicts: ["sys_normal_disable"],
  components: { Treeselect, EnterpriseList },
  data() {
    return {
      tableList2: [],
      detailsIshow: false,
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/visitcorp/CORP/getExcel",
      },

      // 总条数
      total: 0,
      fileList: [],
      //弹窗
      open: false,
      importPopIshow: false,
      listSort: [
        {
          name: "数量升序",
          type: 1,
        },
        {
          name: "数量降序",
          type: 2,
        },
      ],
      // 遮罩层
      loading: true,
      // 表格数据
      tableList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        fileName: "",
        orderType: "",
        updataTime: "",
        startTime: "",
        endTime: "",
      },
      // 上传表单
      queryParams2: {
        folderName: "",
        importType: "0",
      },
    };
  },
  created() {
    // this.getList();
    this.getTableList();
  },
  methods: {
    getTableList(){
      this.loading = false;
      request({
        url: '/visitcorp/CORP/queryVisitCorpFileGroup',
        method: 'get',
        params: this.queryParams
      }).then(res => {

        this.tableList = res.rows
        this.total = res.rows.total
      })
    },
    // 处理日期格式
    convertDate(value) {
      const date = value;
      const y = date.getFullYear(); // 年
      let MM = date.getMonth() + 1; // 月
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate(); // 日
      d = d < 10 ? "0" + d : d;
      console.log(y + "-" + MM + "-" + d, "date");
      return y + "-" + MM + "-" + d;
    },
    // 选中时间区间开始转换时间格式
    timeChange(data) {
      this.$set(this.queryParams, "startTime", this.convertDate(data[0]));
      this.$set(this.queryParams, "endTime", this.convertDate(data[1]));
    },
    // 行点击事件
    tableClick(val) {
      // 获取企业列表
      // this.getCorpList(val)
      this.$refs.EnterpriseList.isShow = true;
      console.log('点击了')
      this.$refs.EnterpriseList.check(val)
    },
    getCorpList(row){
      this.queryParams.fileName=row.fileName
      this.loading = false;
      request({
        url: '/visitcorp/CORP/queryVisitCorpFileGroupByFileName',
        method: 'get',
        params: this.queryParams
      }).then(res => {

        this.tableList2 = res.rows
        this.total = res.rows.total
      })
    },
    /** 下载模板操作 */
    importTemplate() {
      this.download(
        "system/user/importTemplate",
        {},
        `user_template_${new Date().getTime()}.xlsx`
      );
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(
        "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
          response.msg +
          "</div>",
        "导入结果",
        { dangerouslyUseHTMLString: true }
      );
      this.getTableList();
    },
    // 导入
    handleImport() {
      (this.queryParams2 = {
        folderName: "",
        importType: "0",
      }),
        (this.importPopIshow = true);
    },
    handleExport() {
      this.download(
        "system/user/importTemplate",
        {},
        `user_template_${new Date().getTime()}.xlsx`
      );
    },
    // 查询部门列表
    getList() {
      this.loading = false;
      listRole(this.addDateRange(this.queryParams)).then((response) => {
        console.log(response, "response");
        // this.tableList = response.rows;
        this.tableList = [
          {
            fileName: "江苏银行名单",
            countCorp: "3",
            createTime: "2015-05-15",
          },
        ];
        this.total = response.total;
        this.loading = false;
      });
      // listType(this.addDateRange(this.queryParams, this.dateRange)).then(
      //   (response) => {
      //     this.tableList = response.rows;
      //     this.total = response.total;
      //     this.loading = false;
      //   }
      // );
    },

    /** 搜索按钮操作 */
    handleQuery() {
      console.log(this.queryParams, "搜索的参数");
      this.$set(this.queryParams, "pageNum", 1);

      this.getTableList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();

      this.importPopIshow = false;
    },
    // 取消上传弹窗
    uploadFalse() {
      this.importPopIshow = false;
    },
  },
};
</script>
<style scoped>
.file_name_box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.file_icon {
  width: 30px;
  margin-top: 3px;
}
.file_name_text {
  margin-left: 7px;
}
.start_upLoad {
  margin-top: 20px;
}
/deep/.el-upload {
  display: block;
  text-align: left;
}
/deep/.el-upload-list__item:first-child {
  margin-top: 0;
}
.input_box {
  width: 289px;
  margin-left: 15px;
}
.form_box {
  display: flex;
  align-items: center;
}
.form_box2 {
  display: flex;
  margin-top: 15px;
}
.form_name {
  font-weight: bold;
}
.radio_box {
  margin-left: 15px;
}
.radio_div {
  margin-bottom: 10px;
}
.label_box {
  display: flex;
}
.label1 {
  background: #e3f2ed;
  color: #3f9f71;
  text-align: center;
  padding: 0 10px;
  margin-right: 5px;
}
.label2 {
  background: #e4efff;
  color: #3282e4;
  text-align: center;
  padding: 0 10px;
  margin-right: 5px;
}
.label3 {
  background: #fbf1db;
  color: #aa7c1b;
  text-align: center;
  padding: 0 10px;
  margin-right: 5px;
}
.label4 {
  background: #f6e6e1;
  color: #c33d28;
  text-align: center;
  padding: 0 10px;
  margin-right: 5px;
}
</style>
